{% extends 'index.html' %}

{% block page-title %}



{% endblock %}

{% block page-content %}
<div class="row">



<div class="cls-content">
    <div class="cls-content-sm panel">
        <div class="panel-body">
            <p class="pad-btm">导航管理</p>
            <form id="form1" action="#" method="post">


                <div class="form-group" id="action">
                        <div class="input-group">
                            <div class="input-group-addon">动作</div>
                            <select name="action" onchange="change_style(this)" class="form-control">
                                <option value="" selected="true" disabled="true">请选择动作</option>
                                <option value="add">添加</option>
                                <option value="mod">修改</option>
                                <option value="del" disabled="true">删除</option>
                            </select>
                        </div>
                </div>
                <div class="form-group" id="type">
                        <div class="input-group">
                            <div class="input-group-addon">类型</div>
                            <select name="type" class="form-control" onchange="select_site(this)">
                                <option value="" selected="true" disabled="true">请选择类型</option>
                                <option value="1">refresh跳转</option>
                                <option value="2">js跳转</option>
                            </select>
                        </div>
                </div>
                <div class="form-group" id="site">
                        <div class="input-group">
                            <div class="input-group-addon">网站</div>
                            <select name="site" class="form-control">
                                
                            </select>
                        </div>
                </div>
                <div class="form-group" id="ip">
                        <div class="input-group">
                            <div class="input-group-addon">IP</div>
                            <input type="text" class="form-control" name="IP" placeholder="IP格式：1.1.1.1"/>
                        </div>
                </div>
                 <div class="form-group" id="domain">
                        <div class="input-group">
                            <div class="input-group-addon">域名</div>
                            <input type="text" class="form-control" name="domain" placeholder="域名格式：www.baidu.com"/>
                        </div>
                </div>
                <div class="form-group" id="navigate">
                        <div class="input-group">
                            <div class="input-group-addon">跳转导航</div>
                            <input type="text" class="form-control" name="navigate" />
                        </div>
                </div>
                <div class="form-group" id="statics">
                        <div class="input-group">
                            <div class="input-group-addon">统计代码</div>
                            <input type="text" class="form-control" name="statics" />
                        </div>
                </div>


            </form>
            <button id="btn" class="btn btn-success  btn-block" onclick="confirmAct()">
                <b>执行</b>
            </button>
<!--        <button type="button" onclick="confirmAct('mod')" class="button black">修改导航</button>
        <button type="button" onclick="confirmAct('del')" class="button black">删除导航</button> -->

    </div> <!--end col-lg-9-->

</div>
</div>
</div>
<div id="mask" class="mask"></div>
<style>
td {
    font-size: 20px;
}
tr.hide{
    display: none;
}
.mask {
        position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
        z-index: 1002; left: 0px;
        opacity:0.5; -moz-opacity:0.5;
}
</style>
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-validator/bootstrapValidator.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
$(document).ready(function() {
    $('#form1').bootstrapValidator({
        message: 'This value is not valid',
        excluded : [':disabled'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            action: {
                message: 'The action is not valid',
                validators: {
                    notEmpty: {
                        message: '请选择动作'
                    }
                }
            },
            type: {
                message: 'The type is not valid',
                validators: {
                    notEmpty: {
                        message: '请选择类型'
                    }
                }
            },
            IP: {
                message: 'The IP is not valid',
                validators: {
                    notEmpty: {
                        message: 'IP不能为空'
                    },
                    ip: {
                        message: 'IP格式不正确'
                    }
                }
            },
            domain:{
                message: "The domain is not valid",
                validators:{
                    notEmpty:{
                        'message': "域名不能为空"
                    },
                    regexp:{
                        regexp: /^([\w]+\.){1,}[\w]+$/,
                        message: "域名格式不正确"
                    }
                }
            },
            navigate:{
                message: "The navigate is not valid",
                validators:{
                    uri:{
                        message: "跳转导航格式不正确"
                    }
                }

            },
            statics:{
                message: "The statics is not valid",
                validators:{
                    uri:{
                        message: "统计代码格式不正确"
                    }
                }
            }

        }
    });
});

function confirmAct(){
    //var action=action;
    $('#form1').data('bootstrapValidator').validate();//手动对表单进行校检
    if (!$('#form1').data('bootstrapValidator').isValid()) {//判断校检是否通过
        // alert("验证不通过");
        return;
    }else {
        showMask();
        return manage();
    }
}

function manage() {
    var formdata=new FormData($("#form1")[0]);
    $.ajax({
        url: '/nav_manage/',
        type: 'POST',
        data: formdata,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success:function (callback) {
            console.log(callback);
            hideMask();
            alert(callback);
        },

    });
}

function change_style(ele){
    var html_ele=ele;
    var value=html_ele.value;
    var type=$('#type select').value;
    console.log(value);
    if(value==='add'){
        $('#navigate').removeClass('hide');
        $('#site').removeClass('hide');
        if(type==='1'){
            $('#statics').removeClass('hide');
        }

    }
    if(value==='mod'){
        $('#navigate').removeClass('hide');
        $('#site').addClass('hide');
        if(type==='1'){
            $('#statics').removeClass('hide');
        }

    }
    if(value==='del'){
        $('#navigate').addClass('hide');
        $('#site').addClass('hide');
        $('#statics').addClass('hide');
    }
}

function select_site(ele){
    var t=ele.value;
    var s=$('#action').children().children().next().val();
    console.log(s);
    $.ajax({
        url: '/select/nav/site/',
        type: 'POST',
        data: {t:t},
        success: function (callback) {
            var site_list=JSON.parse(callback);
            var html='';
            $.each(site_list,function(index,value){
                html+="<option value='"+value[0]+"'>"+value[1]+"</option>";
            });
            $('#site').children().children().next().html(html);
            if(s==='del'){
                $('#statics').addClass('hide');
            }else{
                if(t==='1'){
                    $('#statics').removeClass('hide');
                }else{
                    $('#statics').addClass('hide');
                }
            }

        }
    })
}

//显示遮罩层
function showMask(){
    $("#mask").css("height",$(document).height());
    $("#mask").css("width",$(document).width());
    $("#mask").show();
}
//隐藏遮罩层
function hideMask(){

    $("#mask").hide();
}


</script>
{% endblock %}
